<!DOCTYPE html>
<html>
<head>
	<title>Reachability Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
	<link rel="icon" type="image/png" href="../../iui-favicon.png">
	<link rel="apple-touch-icon" href="../../iui-logo-touch-icon-hd.png" />
	<link rel="apple-touch-startup-image" href="../../iui-touch-startup.png">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="stylesheet" href="../../iui.css" type="text/css" />
	<link rel="stylesheet" title="Default" href="../../t/default/default-theme.css"  type="text/css"/>
	<script type="application/x-javascript" src="../../iui.js"></script>	

	<style type="text/css">
		div.spinner {
		   visibility: hidden;
		   background: black url(../../t/default/loading.gif) no-repeat center center;
		   position: absolute;
		   top: 0px;
		   left: 0px;
		   height: 100%;
		   width: 100%;
		   opacity: 0.5;
		}
		form.progress div.spinner {
			visibility: visible;  // need better styling here, placeholder
		}
	</style>

	<script type="application/x-javascript" src="iui-reachability.js"></script>
	<script type="application/x-javascript">
		// This demo is designed tor run from either
		//   1) A file URL
		// or
		//   2) A URL on a web server
		//
		// In the file URL case it will be able to test connectivity to iui-js.appspot.com
		// If it is on a web server it will test connectivity to the same server (it won't be able to access
		//  iui-js.appspot.com because of cross-domain restrictions on Ajax
		//
		// The DOMContentLoaded event function sets things up so the demo will work in either case.
		(function() {
		
		var noCacheQuery = "?nocache=" + new Date().getTime();	// used to prevent caching
		var testImage = "t/default/pinstripes.png" + noCacheQuery  // Use small image from iUI
		var testURL;
		var ajaxURL;
		var formURL;
		var hostName = window.location.host;
		if (hostName != "")
		{	// Reference resources on our same server
			testURL = '/iui/' + testImage;
			ajaxURL = '/samples/music/stats.gtpl';
			formURL = '/test/form-echo.gtpl';
		}
		else
		{
			// assume we're running from a file URL, so no cross-domain worries
			hostName = "iui-js.appspot.com";
			testURL = "http://" + hostName + '/iui/' + testImage;
			ajaxURL = "http://" + hostName + '/samples/music/stats.gtpl';
			formURL = "http://" + hostName + '/test/form-echo.gtpl';
		}
		
		iui.reach.addURL(testURL, hostName);
		
		
		addEventListener("DOMContentLoaded", function(event)
		{
			var ajaxLink = document.querySelector('a[href="stats.gtpl"]');
			ajaxLink.setAttribute("href",ajaxURL);
			var formLinks = document.querySelectorAll('form[action="form-echo.gtpl"]');
			for(var i=0; i<formLinks.length; i++)
			{
				formLinks[i].setAttribute("action",formURL);
			}
			ajaxLink.setAttribute("href",ajaxURL);
		}, false);
		
		})();
	</script>
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    
    <ul id="home" title="Reachability" selected="true">
        <li><a href="#about">About Reachability</a></li>
        <li><a href="stats.gtpl">Ajax div</a></li>
    	<li><a href="#GET">Form (GET)</a></li>
    	<li><a href="#POST">Form (POST)</a></li>
    </ul>

	<div id="about" class="panel" title="About">
	  <h2>About Reachability Extension</h2>
		<fieldset>
			<div class="row">
				<p><b>iui-reachability.js</b> is an extension for the iUI framework. It is in the early development stages. It is intended to perform "reachability" testing for hybrid webapps that are wrapped in the UIWebView Cocoa Class. It may also be useful for webapps that are cached using the HTML5 webapp cache -- but hasn't been tested in that configuration yet.</p>
				<p>iUI has recently been improved so that it provides better handling of network failures during Ajax operations. At this writing that work is still in-process and <b>reachability-demo.html</b> can be used  to test that error handling as well.</p>
				<p>If you have any questions (or valuable suggestions!) please post them to either the iphonewebdev and iui-developers Google group.</p>
				<p>The best way to test error handling is to use the iPhone Simulator on your Mac with airport disabled -- unplug and replug your Ethernet cable to test error handling and recovery.</p>
			</div>
		</fieldset>
	</div>
	
	<form id="GET" title="GET" class="panel" action="form-echo.gtpl" method="GET">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
            <div class="row">
                <label>delay (sec):</label>
                <input type="text" name="delay" value="2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit</a>
        <div class="spinner"></div>
    </form>

    <form id="POST" title="POST" class="panel" action="form-echo.gtpl" method="POST">
        <fieldset>
            <div class="row">
                <label>Parm1:</label>
                <input type="text" name="parm1" value="value 1"/>
            </div>
            <div class="row">
                <label>Parm2:</label>
                <input type="text" name="parm2" value="value 2"/>
            </div>
            <div class="row">
                <label>delay (sec):</label>
                <input type="text" name="delay" value="2"/>
            </div>
        </fieldset>
        <a class="whiteButton" type="submit">Submit</a>
        <div class="spinner"></div>
    </form>


</body>
</html>
